<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">

            <h:form id="quadraForm" enctype="multipart/form-data">
                <p:panel styleClass="withoutBorder" rendered="#{!managerLayout.desabilitarMapa() and managerEditarQuadra.connect}">
                    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" />
                </p:panel>

                <h3 class="title">Visualizar Quadra</h3>
                <p:growl id="messages" showDetail="false" autoUpdate="true" />

                <p:panel id="quadraPanel" styleClass="container_24 clearfix both">
                    <h4 class="title">Dados Gerais</h4>

                    <p:outputLabel value="Número" styleClass="grid_3" for="numero"/>
                    <p:inputText id="numero" styleClass="grid_8" value="#{managerEditarQuadra.quadra.numero}"
                                 readonly="true" />

                    <p:outputLabel value="Setor" styleClass="grid_3" for="setor"/>
                    <p:inputText id="setor" styleClass="grid_8" value="#{managerEditarQuadra.quadra.setor.numero}"
                                 readonly="true" />
                    <div class="clear"/>

                </p:panel>

                <p:tabView id="tabView">
                    <p:tab id="tab1" title="Georreferenciamento">
                        <h4 class="title">Georreferenciamento</h4>

                        <p:panel id="geoPanel" styleClass="container_24 clearfix ">

                            <div class="buttonAction">

                                <p:gmap id="map" center="#{managerEditarQuadra.centroMapa}" zoom="#{managerEditarQuadra.zoomLevelMapa}"
                                        rendered="#{!managerLayout.desabilitarMapa() and managerEditarQuadra.connect}" type="HYBRID" 
                                        style="width:97%;height:500px" model="#{managerEditarQuadra.mapModel}" >
                                </p:gmap>

                                <p:outputLabel value="O Georreferenciamento foi desabilitado pois não foi possível estabelecer uma conexão com a Internet !"
                                               rendered="#{!managerLayout.desabilitarMapa() and !managerEditarQuadra.connect}"/>

                                <p:outputLabel value="O Georreferenciamento foi desabilitado pelo administrador do sistema !"
                                               rendered="#{managerLayout.desabilitarMapa()}"/>
                            </div>
                        </p:panel>
                    </p:tab>

                    <p:tab id="tab2" title="Croqui">

                        <p:panel id="croquiPanel" styleClass="container_24 clearfix withoutBorder">

                            <div class="my-simple-gallery" >
                                <figure itemprop="associatedMedia" class="grid_4" onclick="initPhoto(); desabilitaEdicaoImagem();">
                                    <a href="#{managerImagem.urlImagem(managerEditarQuadra.quadra.croqui)}" 
                                       itemprop="contentUrl" data-size="#{managerImagem.widthHeight(managerEditarQuadra.quadra.croqui)}">
                                        <img src="#{managerImagem.urlThumbnailImagem(managerEditarQuadra.quadra.croqui)}" 
                                             itemprop="thumbnail" class="image"/>
                                    </a>
                                    <figcaption itemprop="caption description">#{managerEditarQuadra.quadra.croqui.nomeExibicao}</figcaption>
                                </figure>
                            </div>


                            <h:outputLink value="#{managerEditarQuadra.quadra.croqui ne null and managerEditarQuadra.quadra.croqui.tipo ne 'application/pdf' ? 'viewImage.xhtml':'show'}" 
                                          title="#{managerEditarQuadra.quadra.croqui ne null and managerEditarQuadra.quadra.croqui.nomeExibicao}"  target="_blank" rendered="false">

                                <div style="width: 100%;" class="grid_16">

                                    <p:graphicImage styleClass="image anexoImovel" 
                                                    rendered="#{managerEditarQuadra.quadra.croqui ne null and managerImagem.imagem(managerEditarQuadra.quadra.croqui)}"
                                                    url="#{managerEditarQuadra.quadra.croqui ne null ? managerImagem.urlThumbnailImagem(managerEditarQuadra.quadra.croqui) : ''}" />

                                    <p:graphicImage styleClass="image anexoImovel" 
                                                    rendered="#{managerEditarQuadra.quadra.croqui ne null and managerImagem.PDF(managerEditarQuadra.quadra.croqui)}" 
                                                    url="#{managerImagem.urlPDF}" />
                                    <div class="clear-both"/>

                                    <p:outputLabel  value="#{managerEditarQuadra.quadra.croqui ne null ? managerImagem.nomeAnexo(managerEditarQuadra.quadra.croqui) : ''}" 
                                                    style="margin-left:1%; width: 100px;" 
                                                    rendered="#{managerEditarQuadra.quadra.croqui ne null and managerImagem.imagem(managerEditarQuadra.quadra.croqui)}"/>

                                    <p:outputLabel  value="#{managerEditarQuadra.quadra.croqui ne null ? managerImagem.nomeAnexoPdf(managerEditarQuadra.quadra.croqui) : ''}" 
                                                    style="margin-left:1%; width: 100px;" 
                                                    rendered="#{managerEditarQuadra.quadra.croqui ne null and managerImagem.PDF(managerEditarQuadra.quadra.croqui)}"/>
                                </div>
                                <f:param name="annex" value="#{managerEditarQuadra.quadra.croqui ne null ? managerImagem.urlVisualziarImagem(managerEditarQuadra.quadra.croqui) : ''}"/>
                            </h:outputLink>
                        </p:panel>

                    </p:tab>
                </p:tabView>

                <br/>
                <div class="buttonAction">
                    <p:button href="pesquisarquadra.xhtml" value="Voltar" 
                              icon="ui-icon-arrowreturnthick-1-w"/>
                </div>
            </h:form>

        </ui:define> 
    </ui:composition>

</html>
